<?php

function httpGet($url) {
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_TIMEOUT, 500);
    // 为保证第三方服务器与微信服务器之间数据传输的安全性，所有微信接口采用https方式调用，必须使用下面2行代码打开ssl安全校验。
    // 如果在部署过程中代码在此处验证失败，请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
    //验证token, 本地可以注释掉, 上线必须打开
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
    curl_setopt($curl, CURLOPT_URL, $url);
    $res = curl_exec($curl);
    curl_close($curl);
    return $res;
}

//1. 用户在微信点击确认登录后, 会跳转到此页面, 同时传入一个参数code
$code = $_GET["code"];
//微信测试号的appid和secret
$appid = "wx6ab7a47f724bfa84";
$secret = "cf5d0f24c3c2dc83bee70af7a5028368";

//2. 通过code来请求access_token和openid
$url= "https://api.weixin.qq.com/sns/oauth2/access_token?appid={$appid}&secret={$secret}&code={$code}&grant_type=authorization_code";
$result = httpGet($url);
$arr = json_decode($result, true);
$token = $arr["access_token"];
$openid = $arr["openid"];

//3. 通过access_token和openid获取用户详细信息,(拉取用户信息)
$url = "https://api.weixin.qq.com/sns/userinfo?access_token={$token}&openid={$openid}&lang=zh_CN";
$result = httpGet($url);
$arr = json_decode($result, true);

//链接SAE数据库
mysql_connect(SAE_MYSQL_HOST_M.":".SAE_MYSQL_PORT,SAE_MYSQL_USER,SAE_MYSQL_PASS);
mysql_select_db(SAE_MYSQL_DB);
mysql_query("set names utf8");

//利用openid查询用户是否存在于数据库中
$sql = "SELECT * FROM madcar WHERE openid='{$openid}'";
$result = mysql_query($sql);
if (mysql_num_rows($result) > 0){
//用户信息已经存在
}else{
//如果用户不存在,则将用户信息插入数据库
    $nickname = $arr["nickname"];
    $headimg = $arr["headimgurl"];
    $sql = "INSERT INTO madcar (id,openid,nickname,headimg,prizenum,username,tel,province,city,address,score)
VALUES (NULL ,'{$openid}','{$nickname}','{$headimg}',-1 ,'','','','','',0)";
    echo $sql;
    mysql_query($sql);
    if (mysql_insert_id() > 0){
//会显示用户微信账号的头像
//echo "<img_pageEnd src='{$headimg}'>";
    }else{
//echo "<img_pageEnd src='{$headimg}'>";
    }
}


//用session保存openid
session_start();
if(strlen($openid)>0){
    echo "<script>var openid = '{$openid}';</script>";
    $_SESSION["openid"] = $openid;
}else{
    $openid = $_SESSION["openid"];
    echo "<script>var openid = '{$openid}';</script>";
}

?>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Title</title>
    <link rel="stylesheet" href="animate.css">
    <link rel="stylesheet" href="car.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .wrap{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top:0;
            background-image: url("img/bg1.jpg");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .logo1{
            position: absolute;
            left:5%;
            top:2%;
            width: 20%;
            animation:bounceInLeft  1s ;
        }
        .logo2{
            position: absolute;
            left:40%;
            width: 30%;
            top:5%;
            animation:bounceInDown  1s ;
        }
        .tiaozhan{
            position: absolute;
            bottom:25%;
            left:20%;
            width: 60%;
            animation:bounceInLeft  1s ;
        }
        .guize{
            position: absolute;
            bottom:21%;
            left:40%;
            width: 20%;
            animation:bounceInRight  1s ;
        }
        .b1{
            position: absolute;
            left:10%;
            top:13%;
            width: 90%;
            animation: fadeInLeft 1s;
        }
        .b2{
            position: absolute;
            left:32%;
            top:28%;
            width: 60%;
            animation: fadeInRight 1s;
        }
        .b3{
            position: absolute;
            left:21%;
            top:34%;
            width: 75%;
            animation: fadeInRight 1s;
        }
        .guize1{
            width: 100%;
            height: 100%;
            position: absolute;
            left:0;
            top:0;
            background-color: black;
            opacity: 0.4;
            display: none;
        }
        .page_youxi{
            position: absolute;
            width: 72%;
            left:17%;
            top:19%;
            display: none;
        }
        .close{
            position: absolute;
            left:86%;
            width: 10%;
            top:26%;
            display: none;
        }
        .begin{
            width: 100%;
            height:100%;
            position: absolute;
            left: 0;
            top:0;
            background-image: url("img/page3_jiaocheng.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: none;
        }
        .kaishi{
            position: absolute;
            left:17%;
            top:51%;
            width: 65%;
        }
        .canvas{

        }
        .div1{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: none;
        }
        .jishiqi{
            position: absolute;
            left:10%;
            top:5%;
            width: 35%;
        }
        .lvding{
            position: absolute;
            left:40%;
            top:20%;
            width: 20%;
        }
        .hongding{
            position: absolute;
            left:40%;
            top:20%;
            width: 20%;
        }
        .huangding{
            position: absolute;
            left:40%;
            top:20%;
            width: 20%;
        }
        .ding{
            position: absolute;
            left:40%;
            top:20%;
            width: 20%;
        }
        .start{
            position: absolute;
            width: 50%;
            bottom:40%;
            left:25%;
        }
        .anniuz{
            position: absolute;
            left:23%;
            bottom:10%;
            width: 15%;
        }
        .anniuy{
            position: absolute;
            right:24%;
            bottom:10%;
            width: 15%;
        }
        .jiashuqi{
            position: absolute;
            right:0%;
            bottom:14%;
            width: 17%;
        }
        .jianshuqi{
            position: absolute;
            right:0%;
            bottom:16%;
            width: 17%;
        }
        .jishi{
            color:white;
            position: absolute;
            left:26%;
            top:9%;
            font-size: 24px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <img src="img/zuo_logo.png" alt="" class="logo1">
    <img src="img/you_logo.png" alt="" class="logo2">
    <img src="img/tiaozhan_GO.png" alt="" class="tiaozhan">
    <img src="img/youxiguize.png" alt="" class="guize">
    <img src="img/saiche30S.png" alt="" class="b1">
    <img src="img/dizhonghai.png" alt="" class="b2">
    <img src="img/xuanfengcheshou.png" alt="" class="b3">
</div>
<div class="guize1">
</div>
<img src="img/page_youxiguize.png" alt="" class="page_youxi">
<img src="img/close.png" alt="" class="close">
<div class="begin">
    <img src="img/page3_kaishiyouxi.png" alt="" class="kaishi">
</div>
<canvas class="canvas"></canvas>
<div class="div1">
    <img src="img/jishiqi.png" alt="" class="jishiqi">
    <img src="img/lvding.png" alt="" class="lvding">
    <img src="img/huangding.png" alt="" class="huangding">
    <img src="img/hongding.png" alt="" class="hongding">
    <img src="img/ding.png" alt="" class="ding">
    <img src="img/start.png" alt="" class="start">
    <img src="img/anniuz.png" alt="" class="anniuz">
    <img src="img/anniuy.png" alt="" class="anniuy">
    <img src="img/jianshuqi.png" alt="" class="jianshuqi">
    <img src="img/jiashuqi.png" alt="" class="jiashuqi">
    <div class="jishi">
        <p>0:0:<span class="daojishi">30</span></p>
    </div>
</div>

<!--过关啦页面-->
<section id="pageEnd_success">
            <img src="img_pageEnd/bg_pageEnd1.png" alt="" class="bg_pageEnd1">
            <img src="img_pageEnd/invitation_2.png" alt="" class="invitation_2">
            <img src="img_pageEnd/rankList.png" alt="" class="rankList">
    <ul id="word_success">
        <li>你闯过了<span class="fenshu123">88</span>个障碍物</li>
        <li>胜出了全国<span>88%</span>的玩家</li>

    </ul>
</section>

<!--邀请导师-->
<section id="pageShare">
    <li id="bg_share"></li>
    <img src="img_pageEnd/invitation_3.png" alt="" class="invitation_3">
</section>

<!--排行榜-->
<section id="pageRank">
    <img src="img_pageEnd/bg_rank.png" alt="" class="bg_rank">
    <ul id="rank_list">
        <li style="color:red"><span>1</span><span></span><span></span></li>
        <li style="color:#EDEA4A"><span>2</span><span></span><span></span></li>
        <li style="color:palevioletred"><span>3</span><span></span><span></span></li>
        <li><span>4</span><span></span><span></span></li>
        <li><span>5</span><span></span><span></span></li>
        <li><span>6</span><span></span><span></span></li>
        <li><span>7</span><span></span><span></span></li>
        <li><span>8</span><span></span><span></span></li>
    </ul>
</section>

<!--过关失败-->
<section id="pageEnd_fail">
    <img src="img_pageEnd/bg_pageEnd2.png" alt="" class="bg_pageEnd2">
    <img src="img_pageEnd/againGo.png" alt="" class="againGo">
    <img src="img_pageEnd/rankList.png" alt="" class="rankList">
    <ul id="word_fail">
        <li>你只闯过了<span class="shibaifenshu">3</span>个障碍物</li>
        <li>胜出了全国<span>7%</span>的玩家</li>
    </ul>
</section>

<!--抽奖页面-->
<section id="random_prize">
    <img src="img_pageEnd/bg_pageEnd3.png" alt="" class="bg_pageEnd3">
    <img src="img_pageEnd/turnDish.png" alt="" class="turnDish">
    <img src="img_pageEnd/turnDish_1.png" alt="" class="turnDish_1">
    <img src="img_pageEnd/finger.png" alt="" class="finger">
    <!--<img_pageEnd src="img_pageEnd/carNormalState.png" alt="" class="carNormalState">-->
    <img src="img_pageEnd/againGo_1.png" alt="" class="againGo_1">
</section>

<!--抽奖成功-->
<section id="random_prize_suc">
    <img src="img_pageEnd/randomPrizeSuc.png" alt="" class="randomPrizeSuc">
    <div class="prizeBook_wrap">
        <img src="img_pageEnd/prizeBook.png" alt="" class="prizeBook">
    </div>
    <img src="img_pageEnd/writePersonMessage.png" alt="" class="writePersonMessage">
</section>

<!--你的好友邀请你做他的导师-->
<!--<section id="your_friend_invitation">-->
<!--    <img_pageEnd src="img_pageEnd/youBeinvited.png" alt="" class="youBeinvited">-->
<!--    <img_pageEnd src="img_pageEnd/levelUp.png" alt="" class="levelUp">-->
<!--    <img_pageEnd src="img_pageEnd/youTooShit.png" alt="" class="youTooShit">-->
<!--    <ul id="your_friend_invitation_ul1">-->
<!--        <li>你的好友&nbsp&nbsp<span>魔鬼</span></li>-->
<!--        <li>邀请你做他的导师</li>-->
<!--    </ul>-->
<!--    <ul id="your_friend_invitation_ul2">-->
<!--        <li>闯过了&nbsp&nbsp<span style="color: #EDEA4A">300</span>&nbsp&nbsp个障碍物</li>-->
<!--        <li>胜出了全国&nbsp&nbsp<span style="color: #EDEA4A">75%</span>&nbsp&nbsp的玩家</li>-->
<!--    </ul>-->
<!--</section>-->
<!---->
<!--<!--拜谢你-->-->
<!--<section id="thankyou">-->
<!--    <img_pageEnd src="img_pageEnd/thankyou.png" alt="" class="thankyou">-->
<!--    <img_pageEnd src="img_pageEnd/challengeGo2.png" alt="" class="challengeGo2">-->
<!--    <ul id="thankyou_word">-->
<!--        <li><span>魔鬼</span>&nbsp&nbsp拜谢你</li>-->
<!--    </ul>-->
<!--</section>-->

<!--没有好友选择让你晋级-->
<section id="no_friends_levelUpYou">
    <img src="img_pageEnd/noFriendsInviteYou.png" alt="" class="noFriendsInviteYou">
    <img src="img_pageEnd/againGo_1.png" alt="" class="againGo_2">
    <img src="img_pageEnd/inviteOtherFriends.png" alt="" class="inviteOtherFriends">
    <ul id="noTeacherChooseYou">
        <li>(已有<span style="color: #EDEA4A">888</span>位导师选择"你丫太差了")</li>
    </ul>
</section>

<!--成功晋级,可以抽奖-->
<section id="levelUp_success">
    <img src="img_pageEnd/youCanRandomPrize.png" alt="" class="youCanRandomPrize">
    <img src="img_pageEnd/rightNowGo.png" alt="" class="rightNowGo">
</section>

<!--你被淘汰了-->
<section id="you_are_out">
    <img src="img_pageEnd/youAreOut.png" alt="" class="youAreOut">
    <img src="img_pageEnd/againGo_1.png" alt="" class="againGo_2">
</section>

<!--领奖信息登记-->
<section id="register_prize_message">
    <img src="img_pageEnd/registerMessage.png" alt="" class="registerMessage">
    <img src="img_pageEnd/fillDone.png" alt="" class="fillDone">
    <ul id="register_prize_message_list">
        <li>
            <input type="text" id="username" >
            <input type="text" id="tel">
            <select name="province" id="province"></select>
            <select name="city" id="city"></select>
            <input type="text" id="address" placeholder="详细地址">
        </li>
    </ul>
</section>

<!--信息提交成功-->
<img src="img_pageEnd/messageSubmitSuc.jpg" alt="" class="messageSubmitSuc">
<!--抽奖失败-->
<img src="img_pageEnd/gotPrizeFail.jpg" alt="" class="gotPrizeFail">
<!--恭喜你,好棒,现在马上去抽奖吧-->
<img src="img_pageEnd/congratulations.jpg" alt="" class="congratulations">

<script src="jquery-1.12.1.min.js"></script>
<script src="car.js"></script>
<script src="touch.js"></script>
<script src="loading.js"></script>

</body>
</html>